<template>
    <div class="navbar">
      <!--
        从vuex里获取内容并动态渲染到组件里的方式：
        1.在v-bind里直接写$store.state.xxx (字符串只能用这个方式)。
        2.在computed(计算属性)里声明一个方法，方法里 return this.$store.state (字符串只能用这个方式)。
        3.数组、Map、Set等数据结构，要用push、set、add等方法才能触发动态渲染，直接赋值是不行的。

        参考学习文章：https://www.jb51.net/article/199749.htm
       -->
      <el-tabs 
        v-model="$store.state.navBar.navBarActionName" 
        tab-position="left" 
        @tab-click="handleClick"
      >
        <el-tab-pane name="视频管理-video"><!-- el-tab-pane里的name属性存储了菜单项的名称和对应的子组件的name，用-分隔 -->
          <span slot="label"><i class="el-icon-video-camera-solid"></i> 视频管理</span>
        </el-tab-pane>
        <el-tab-pane name="照片管理-photo">
          <span slot="label"><i class="el-icon-picture"></i> 照片管理</span>
        </el-tab-pane>
        <el-tab-pane name="权限管理-authority">
          <span slot="label"><i class="el-icon-s-opportunity"></i> 权限管理</span>
        </el-tab-pane>
        <el-tab-pane name="上传-upload">
          <span slot="label"><i class="el-icon-upload"></i> 上传</span>
        </el-tab-pane>        
      </el-tabs>
      

    </div>
</template>

<script>
export default {
    name:'home-navbar',
    data(){
        return{
            //navBarActionName:this.$store.state.navBar.navBarActionName, //把导航菜单活动项名称存储起来，放入vuex里面
            //navBarList:this.$store.state.navBar.navBarList //把导航菜单以数组的形式存储起来,放入vuex里面。
            /*
            注意：
            1.上面两个变量，通过vuex赋值，string类型的变量赋值失败，数组类型的变量赋值是成功的，
              最后通过computed才能正常从vuex里获取string类型的数据。
            2.vuex中使用数组、Map、Set等结构存储的时候，一定要用push、set、add等方法，直接赋值，组件是不能动态感知的。
            */

        }
    },
    methods:{
       handleClick(tab, event) {
        // console.log(tab, event);
        // console.log(tab.name);

        //el-tab-pane里的name属性存储了菜单项的名称和对应的子组件的name，用-分隔。
        let actionItemName = tab.name;
        let KeepAliveItemName = tab.name.split('-')[1];

        //步骤1：把点击的导航菜单项名称，添加到vuex的navBarList数组里
        this.$store.dispatch('pushNavBarList',actionItemName)

        //步骤2：把导航菜单的活动项名称，设置到vuex的navBarActionName字符串变量里
        this.$store.dispatch('setNavBarActionName',actionItemName)

        //步骤3: 把点击的导航菜单项对应的组件的name，添加到vuex的keep-alive的允许缓存的数组里
        this.$store.dispatch('pushKeepAliveList','content-'+KeepAliveItemName)

        //步骤4：跳转到点击的导航菜单项对应的子路由，渲染对应的子组件
        // this.$router.push({path:'/home/'+KeepAliveItemName});
        //这里不需要了，在navbar组件里通过watch监听导航菜单活动项的改变，进行路由跳转。
      }
    },
    computed:{
        getNavBarActionName:{
            /*
            从vuex里获取导航菜单的活动项目名称。
            注意：在v-model中使用computed时，computed必须要设置get和set方法，否则控制台会出现warn。
            这个computed是为了给下面的watch触发监听用的。
            */
            get(){
                return this.$store.state.navBar.navBarActionName;
            },
            set(value){

            }
            
        }
    },
    watch:{
      getNavBarActionName(newValue,oldValue){
        /*
        根据导航菜单活动项的改变，进行路由跳转，渲染对应的子路由。
        由于data里的string类型变量，无法感知vuex里数据的变化，
        所以只能通过  watch--监听-->computed--监听-->vuex里的string类型属性
        */
        this.$router.push({path:'/home/'+newValue.split('-')[1]});
      }
    }
}
</script>

<style scoped>

.el-tabs>>>.el-tabs__active-bar{ /* 取消掉组件自带的一些效果 */
  display: none;
}

.el-tabs>>>.el-tabs__nav-wrap.is-left::after{ /* 取消掉组件自带的一些效果 */
  width: 0;
}

/* .el-tabs>>>.el-tabs__content{ 取消掉组件自带的一些效果
  display: none;
} */


.el-tabs>>>.el-tabs__header{
  width: 100%; /* 让宽度填充父级宽度(这个组件自带一个固定宽度) */
  border: none; /* 这一层样式自带一个边框，取消掉 */
}

.el-tabs{
  background-color: rgba(84,92,100,0.7); /* 导航栏整体背景色 */
  border-radius: 15px;
}

.el-tabs>>>.el-tabs__item{ /* 设置每个导航项的高、字体、内容水平居中 */
  height: 60px;
  line-height: 60px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #fff;

  transition: all 0.2s linear; /*过渡效果，让hover和选中时候的颜色变化不会太生硬*/
}

/* 菜单项:hover时的颜色 */
.el-tabs>>>.el-tabs__item:hover{
  background-color: rgba(67,74,80,0.8);
}


/* 菜单项选中时的颜色 */
.el-tabs>>>.el-tabs__item.is-active{
  background-color: rgba(67,74,80,0.8);
  color: #ffa502;
}

</style>